import ZYLXMaterialProperty from '../../lib/zhuanYiLuXian'
export default {
    data() {
        return {
            imageZYKX: require('@/assets/map/ZYLX.png'),
            peopleZYKX: require('@/assets/map/people.png')
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        basin: {
            handler: function(name) {
                this.$nextTick(() => {
                    this.creatZYLX(name)
                })
            },
            immediate: true
        }
    },
    created() {
        this._dataSourceZYLX = null
    },
    beforeDestroy() {
        this.clearZYLX()
    },
    methods: {
        creatZYLX(name) {
            this.clearZYLX()
            if (this.layerList2[1].children.ZYLX.show) {
                this._dataSourceZYLX = new Cesium.CustomDataSource('PolylineDataSource')
                var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/ZYLX.json`

                var st = Cesium.JulianDate.fromDate(new Date())
                const et = Cesium.JulianDate.addSeconds(st, 15, new Cesium.JulianDate())
                this.$viewer.clock.startTime = st.clone()
                this.$viewer.clock.stopTime = et.clone()
                this.$viewer.clock.currentTime = st.clone()

                this.$viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP // Loop at the end
                this.$viewer.clock.multiplier = 1
                this.$viewer.clock.shouldAnimate = true
                this.$axios.get(url).then(res => {
                    res.data.features.forEach(feature => {
                        var lonlats = []
                        if (feature.geometry.type === 'LineString') {
                            feature.geometry.coordinates.forEach(coordinate => {
                                lonlats.push(...coordinate)
                            })
                        } else if (feature.geometry.type === 'MultiLineString') {
                            feature.geometry.coordinates.forEach(coordinates => {
                                coordinates.forEach(coordinate => {
                                    lonlats.push(...coordinate)
                                })
                            })
                        } else {
                            console.log('An error occurred')
                        }
                        // feature.geometry.coordinates.forEach(coordinate => {
                        //     lonlats.push(...coordinate)
                        // })
                        // var _image = require('@/assets/map/arrowLine.png')
                        var repeat = feature.properties['SHAPE_Le_1']
                        // console.log(repeat)
                        var zylxMaterialProperty = new Cesium.ZYLXMaterialProperty({
                            image: this.imageZYKX,
                            duration: 4000,
                            color: Cesium.Color.fromCssColorString('#309EF3'),
                            repeat: repeat * 1000,
                            highlight: false
                            // repeat: repeat * 500
                        })
                        var polylineEntity = {
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArray(lonlats),
                                width: 15,
                                material: zylxMaterialProperty,
                                clampToGround: true,
                                classificationType: Cesium.ClassificationType.BOTH // BOTH  or TERRAIN
                            }
                        }
                        this._dataSourceZYLX.entities.add(polylineEntity)
                        this.initPeople(lonlats, st, et, repeat)
                    })
                    this.$viewer.dataSources.add(this._dataSourceZYLX)
                })
            } else {
                this.clearZYLX()
            }
        },
        getDistance(lng1, lat1, lng2, lat2) {
            var radian1 = (lat1 * Math.PI) / 180.0 // 纬度：角度转换成弧度
            var radian2 = (lat2 * Math.PI) / 180.0
            var radianLatDiff = radian1 - radian2 // 纬度之差
            var radianLonDiff = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0 // 经度之差
            var radius = 6378137 // 赤道半径
            return (
                radius *
                2 *
                Math.asin(
                    Math.sqrt(
                        Math.pow(Math.sin(radianLatDiff / 2), 2) +
                        Math.cos(radian1) * Math.cos(radian2) * Math.pow(Math.sin(radianLonDiff / 2), 2)
                    )
                )
            )
        },
        computeFlight(points, st, len) {
            const property = new Cesium.SampledPositionProperty()
            var step = 10 / ((points.length / 2) - 1)
            for (let i = 0; i <= points.length - 1; i = i + 2) {
                const time = Cesium.JulianDate.addSeconds(st, i * 0.5 * step, new Cesium.JulianDate())
                const position = Cesium.Cartesian3.fromDegrees(points[i], points[i + 1], 1000)
                // 添加位置，和时间对应
                property.addSample(time, position)
            }
            return property
        },
        initPeople(lonlats, len) {
            var st = Cesium.JulianDate.fromDate(new Date())
            // st = Cesium.JulianDate.addSeconds(st, 10, new Cesium.JulianDate())
            var et = Cesium.JulianDate.addSeconds(st, 10, new Cesium.JulianDate())
            const property = this.computeFlight(lonlats, st, len)
            this._dataSourceZYLX.entities.add({

                // position: Cesium.Cartesian3.fromDegrees(this.line[0][0], this.line[0][1], this.line[0][2]),
                availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start: st,
                    stop: et
                    // isStartIncluded: false,
                    // isStopIncluded: false
                })]),
                position: property,
                // 根据所提供的速度计算模型的朝向
                orientation: new Cesium.VelocityOrientationProperty(property),
                // model: {
                    // uri: '/gltf/Cubeman.glb',
                    // uri: '/gltf/wbainiu.glb',
                    // runAnimations: false,
                    // minimumPixelSize: 80,
                    // maximumScale: 100,
                    // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000)
                    // colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,
                    // colorBlendAmount: 1,
                    // color: Cesium.Color.fromCssColorString('#309EF3'),
                    // silhouetteSize: 2,
                    // silhouetteColor: Cesium.Color.YELLOWGREEN
                // }
            })
        },
        clearZYLX() {
            if (this._dataSourceZYLX) this.$viewer.dataSources.remove(this._dataSourceZYLX)
        }
    }
}
